<template>
  <el-container>
    <el-header class="head" style="margin-top: 15px">
      <div class="head-icon1">
        <el-button style="border: none;margin-top: 1px" @click="handleAdd">
          <div style="height: 38px;width: 40px;text-align: center" >
            <img src="~@/assets/icons/imageicon/12.png" style="height: 28px;">
            <div style="margin-bottom: 10px">入住</div>

          </div>
        </el-button>

        <el-button style="border: none;margin-top: 1px;margin-left: 0px" @click="backAdd">
          <div style="height: 38px;width: 40px;text-align: center" >
            <img src="~@/assets/icons/imageicon/17.png" style="height: 28px;margin-bottom: 0px">
            <div style="margin-bottom: 10px">退房</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 1px;margin-left: 0px" @click="cleanUp">
          <div style="height: 38px;width: 40px;text-align: center" >
            <img src="~@/assets/icons/imageicon/18.png" style="height: 25px;margin-bottom: 3px">
            <div style="margin-bottom: 10px">洁房</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 1px;margin-left: 0px" @click="getOver">
          <div style="height: 38px;width: 40px;text-align: center" >
            <img src="~@/assets/icons/imageicon/15.png" style="height: 25px;margin-bottom: 3px">
            <div style="margin-bottom: 10px;margin-left: -4px;" >洁房完毕</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 1px;margin-left: 0px" @click="getBell">
          <div style="height: 38px;width: 40px;text-align: center" >
            <img src="~@/assets/icons/imageicon/14.png" style="height: 25px;margin-bottom: 3px">
            <div style="margin-bottom: 10px;margin-left: -4px;" >加钟</div>
          </div>
        </el-button>

        <el-button style="border: none;margin-top: 1px;margin-left: 0px" @click="getLeave">
          <div style="height: 38px;width: 40px;text-align: center" >
            <img src="~@/assets/icons/imageicon/21.png" style="height: 25px;margin-bottom: 3px">
            <div style="margin-bottom: 10px;margin-left: -4px;" >留房离开</div>
          </div>
        </el-button>



        <el-button style="border: none;margin-top: 1px;margin-left: 0px" @click="getChange">
          <div style="height: 38px;width: 40px;text-align: center" >
            <img src="~@/assets/icons/imageicon/19.png" style="height: 25px;margin-bottom: 3px">
            <div style="margin-bottom: 10px;margin-left: -4px;" >换全天</div>
          </div>
        </el-button>

      </div>






      <div class="head-biaoqian1">
        <el-tag style="height: 60px;width: 120px;line-height: 60px;font-size: 20px">空房</el-tag>
        <el-tag type="danger" style="height: 60px;width: 120px;margin-left: 5px;line-height: 60px;font-size: 20px">使用中
        </el-tag>
        <el-tag type="info"
                style="height: 60px;width: 120px;margin-left: 5px;line-height: 60px;font-size: 20px">留房
        </el-tag>

        <el-tag type="warning" style="height: 60px;width: 120px;margin-left: 5px;line-height: 60px;font-size: 20px">已退房
        </el-tag>


        <el-tag type="success" style="height: 60px;width: 120px;margin-left: 5px;line-height: 60px;font-size: 20px">
          打扫中</el-tag>





      </div>
    </el-header>
    <el-container >
      <el-aside  class="world" style="width: 1120px;">
        <div class="house1" >
          <el-tabs  v-model="activeName" type="border-card" class="biaoqian" style="text-align: center;width: 1072px;"
          >

            <div class="biaozhunpage1">
              <el-row class="first-row" style="margin-top: 5px;margin-left: -16px;">
                <el-button  v-for="(item,index) in normalList"  @click="getNormalList(item)"
                            :type="getRoomColor(item.roomStatus)" plain
                            style="margin-left: 14px; margin-top:10px;height: 115px;width: 115px">
                  <h3>{{item.roomNumber}}</h3>
                  <div>
                    <dict-tag :options="dict.type.yqg_room_type" :value="item.roomType"/>

                  </div>
                </el-button>

              </el-row>

            </div>

            <!--            </el-tab-pane>-->



          </el-tabs>

        </div>

      </el-aside>
      <el-main class="hello">
        <div class="main-head1">
          <div class="main-head-left2" style="width: 100%" >
            <el-divider ><span style="font-size: 20px">客房实时信息</span></el-divider>
            <div class="main-head-left-down1"  v-for="item in numberList" style="margin-left: 15px">
              <el-descriptions>
                <el-descriptions-item label="客房类型"><span style="color:red;font-size: 15px">
<!--                   <dict-tag :options="dict.type.yqg_room_type" :value="item.roomType"/>-->
                  {{item.note6}}
                </span>
                </el-descriptions-item>
                <el-descriptions-item label="房间号">{{item.roomNumber}}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions direction="vertical">

                <el-descriptions-item label="客房状态">
                  <el-steps :space="200" :active="Number(item.roomStatus)" finish-status="success"
                            style="width: 600px;margin-left:
                  10px">
                    <el-step title="空房"></el-step>
                    <el-step title="使用中"></el-step>
                    <el-step title="已退房"></el-step>
                    <el-step title="留房"></el-step>
                    <el-step title="打扫中"></el-step>
                  </el-steps>
                </el-descriptions-item>

              </el-descriptions>

              <el-descriptions v-if="item.roomStatus==1">
                <el-descriptions-item label="客房信息">
                  <div>
                    <span>手牌号：<span style="color: red">{{item.handBrand}}</span></span><br>
                    <span>开房时间：</span><span style="color: red;margin-left: 0px;" >{{item.note1}}{{item.note5 ? ' (' +
                    item.note5 + ')'
                    : ''}}</span><br>


                    <template v-if="item.inmate || item.wakeUp||item.note4">
                      <span v-if="item.inmate">同住手牌：<span style="color: red">{{item.inmate}}</span></span>
                      <span v-if="item.inmate && item.wakeUp && item.note4" ></span>
                      <span v-if="item.wakeUp" style="margin-left: 15px;">叫醒时间：<span style="color: red">{{item.wakeUp}}</span></span>
                      <span v-if="item.note4" style="margin-left: 15px;">小时房到时时间：<span style="color: red">{{item.note4}}</span></span>
                    </template>
                    <br>
                  </div>
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions  v-if="item.entryName != '' && item.entryName !== null"  style="margin-top: -10px;">
                <el-descriptions-item label="项目信息">
                  <div>
                    <span class="text-align-center">项目名称：<span style="color: blue">{{item.entryName}}</span></span><br>
                    <span class="text-align-center">技师号：<span style="color: blue">{{item.artificer}}</span></span><br>
                    <span class="text-align-center">上钟时间：<span style="color: blue">{{item.actualTime}}</span></span><br>

                  </div>
                </el-descriptions-item>
              </el-descriptions>




            </div>

          </div>

        </div>
        <div class="main-head-left1" style="width: 100%;margin-top: 25px;height: 50%;"  >
          <el-divider ><span style="font-size: 20px">其他服务</span></el-divider>
          <div class="main-head-left-down1"  style="margin-left: 15px">
            <el-descriptions>
              <el-descriptions-item    label="休息到时"><span v-for="item in latterList"
                                                          style="color:red;font-size: 15px;margin-left: 8px;">
                  {{item.roomNumber}}
                </span>

              </el-descriptions-item>

            </el-descriptions>
          </div>
          <el-descriptions direction="vertical" style="margin-left: 13px;margin-top: 20px;">




            <el-descriptions-item label="正在打扫的客房" style="margin-left: 13px;">
              <div style="margin-top: -32px;margin-left: 108px;">
      <span v-for="item in cleanList"
            style="color:red;font-size: 15px;margin-left: 8px;">
                  {{item.roomNumber}}
                </span>
              </div>
            </el-descriptions-item>

          </el-descriptions>

          <el-descriptions direction="vertical" style="margin-left: 13px;margin-top: 16px;">


            <el-descriptions-item label="叫醒房间号" style="margin-left: 13px;">
              <div style="margin-top: -32px;margin-left: 80px;">
      <span v-for="item in wakeList"
            style="color:red;font-size: 15px;margin-left: 8px;">
                  {{item.roomNumber}}
                </span>
              </div>
            </el-descriptions-item>

          </el-descriptions>

          <el-descriptions direction="vertical" style="margin-left: 13px;margin-top: 16px;">


            <el-descriptions-item label="空闲房间" style="margin-left: 13px;">
              <div style="margin-top: -32px;margin-left: 80px;">
      <span v-for="item in emptyList"
            style="color:red;font-size: 15px;margin-left: 8px;">
                  {{item.note3}}间
                </span>
              </div>
            </el-descriptions-item>

          </el-descriptions>

          <el-descriptions direction="vertical" style="margin-left: 13px;margin-top: 16px;">


            <el-descriptions-item label="使用中房间" style="margin-left: 13px;">
              <div style="margin-top: -32px;margin-left: 80px; ">
      <span v-for="item in emptyList" v-if="item.note4 != '' && item.note4 !== null"
            style="color:red;font-size: 15px;margin-left: 8px;">
                  {{item.note4}}间
                </span>
              </div>
            </el-descriptions-item>

          </el-descriptions>

          <!--开房的弹出框-->
          <el-dialog :title="title" :close-on-click-modal="false":visible.sync="open" width="850px" style="margin-top: 50px;" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="手牌号" prop="handBrand">
                    <el-input v-model="form.handBrand" placeholder="请输入手牌号" style="width: 100%;"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="房间号" prop="roomNumber">
                    <el-input v-model="form.roomNumber" placeholder="请输入房间号"
                              @input="handleRoomNumberChange(form.roomNumber)" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="房间类型" prop="roomType">
                    <el-select v-model="form.roomType" placeholder="请选择房间类型" style="width: 100%;" :disabled="true">
                      <el-option
                        v-for="dict in dict.type.yqg_room_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="房间费用" prop="roomCharges">
                    <el-select v-model="form.roomCharges" placeholder="请选择房间费用" style="width: 100%;">
                      <el-option
                        v-for="price in prices"
                        :key="price"
                        :label="price"
                        :value="price"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="开房时间" prop="note1">
                    <el-date-picker clearable
                                    v-model="form.note1"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="请选择开房时间"
                                    style="width: 100%;">
                    </el-date-picker>

                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="同住手牌" prop="inmate">
                    <el-input v-model="form.inmate" placeholder="请输入同住手牌号" style="width: 100%;">
                      <template slot="append">
                        <el-button @click="handleConfirm(form.inmate)">确定</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="叫醒时间" prop="checkOutTime">
                    <el-date-picker clearable
                                    v-model="form.wakeUp"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="请选择叫醒时间" style="width: 100%;">
                    </el-date-picker>
                  </el-form-item>

                </el-col>
                <el-col :span="11">
                  <el-form-item label="服务员" prop="waiter">
                    <el-input v-model="form.waiter" placeholder="请输入服务员" />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>



          <!--退房的对话框-->
          <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="back" width="850px"
                     style="margin-top: 50px;" append-to-body>
            <el-form ref="backform" :model="backform" :rules="rules2" label-width="80px">
              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="手牌号" prop="handBrand">
                    <el-input v-model="backform.handBrand" placeholder="请输入手牌号" style="width: 100%;":disabled="true"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="房间号" prop="roomNumber">
                    <el-input v-model="backform.roomNumber" placeholder="请输入房间号" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="退房时间" prop="note2">
                    <el-date-picker clearable
                                    v-model="backform.note2"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="请选择退房时间"
                                    style="width: 100%;">
                    </el-date-picker>

                  </el-form-item>
                </el-col>
                <el-col :span="11" >
                  <el-form-item label="同住离开" prop="whetherLeave">

                    <el-select v-model="backform.whetherLeave" placeholder="请输入是否离开" style="width: 100%;">
                      <el-option label="是" value="0"></el-option>
                      <el-option label="否" value="1"></el-option>
                    </el-select>

                  </el-form-item>
                </el-col>
              </el-row>






            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm1">确 定</el-button>
              <el-button @click="cancel1">取 消</el-button>
            </div>
          </el-dialog>

          <!--洁房的对话框-->
          <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="cleaner" width="600px"
                     style="margin-top: 50px;" append-to-body>
            <el-form ref="cleanerForm" :model="cleanerForm" :rules="rules1" label-width="80px">

              <el-row justify="space-between" style="margin-left: 150px;">

                <el-col :span="14">
                  <el-form-item label="清洁房号" prop="roomNumber">
                    <el-input v-model="cleanerForm.roomNumber" placeholder="请输入清洁房号" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="space-between" style="margin-left: 150px;">

                <el-col :span="14" >
                  <el-form-item label="房嫂工号" prop="cleanerNumber">
                    <el-input v-model="cleanerForm.cleanerNumber" placeholder="请输入房嫂工号" />
                  </el-form-item>
                </el-col>
              </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm2">确 定</el-button>
              <el-button @click="cancel2">取 消</el-button>
            </div>
          </el-dialog>
          <!--洁房完毕的弹出框-->
          <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="over" width="600px" style="margin-top:
          50px;" append-to-body>
            <el-form ref="cleanerForm" :model="cleanerForm" :rules="rules1" label-width="80px">

              <el-row justify="space-between" style="margin-left: 150px;">

                <el-col :span="14">
                  <el-form-item label="清洁房号" prop="roomNumber">
                    <el-input v-model="cleanerForm.roomNumber" placeholder="请输入清洁房号" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="space-between" style="margin-left: 150px;">

                <el-col :span="14" >
                  <el-form-item label="房嫂工号" prop="cleanerNumber">
                    <el-input v-model="cleanerForm.cleanerNumber" placeholder="请输入房嫂工号" />
                  </el-form-item>
                </el-col>
              </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm3">确 定</el-button>
              <el-button @click="cancel3">取 消</el-button>
            </div>
          </el-dialog>

          <!--加钟的-->
          <el-dialog :title="title" :close-on-click-modal="false":visible.sync="bell" width="850px" style="margin-top:
          50px;"  @input="handleDialogChange" append-to-body>
            <el-form ref="bellform" :model="bellform" :rules="rules" label-width="80px">
              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="手牌号" prop="handBrand">
                    <el-input v-model="bellform.handBrand" placeholder="请输入手牌号" style="width: 100%;"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="房间号" prop="roomNumber">
                    <el-input v-model="bellform.roomNumber" placeholder="请输入房间号"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="房间类型" prop="roomType">
                    <el-select v-model="bellform.roomType" placeholder="请选择房间类型" style="width: 100%;" :disabled="true">
                      <el-option
                        v-for="dict in dict.type.yqg_room_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="房间费用" prop="roomCharges">
                    <el-select v-model="bellform.roomCharges" placeholder="请选择房间费用" style="width: 100%;">
                      <el-option
                        v-for="price in prices"
                        :key="price"
                        :label="price"
                        :value="price"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="开房时间" prop="note1">
                    <el-date-picker clearable
                                    v-model="bellform.note1"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="请选择开房时间"
                                    style="width: 100%;">
                    </el-date-picker>

                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="同住手牌" prop="inmate">
                    <el-input v-model="bellform.inmate" placeholder="请输入同住手牌号" style="width: 100%;">
                      <template slot="append">
                        <el-button @click="handleConfirm(form.inmate)">确定</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="叫醒时间" prop="checkOutTime">
                    <el-date-picker clearable
                                    v-model="bellform.wakeUp"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="请选择叫醒时间" style="width: 100%;">
                    </el-date-picker>
                  </el-form-item>

                </el-col>
                <el-col :span="11">
                  <el-form-item label="服务员" prop="waiter">
                    <el-input v-model="bellform.waiter" placeholder="请输入服务员" />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm4">确 定</el-button>
              <el-button @click="cancel4">取 消</el-button>
            </div>
          </el-dialog>


<!--换全天的-->
          <el-dialog :title="title" :close-on-click-modal="false":visible.sync="full" width="850px" style="margin-top:
          50px;"  @input="handleDialogChange" append-to-body>
            <el-form ref="fullform" :model="fullform" :rules="rules" label-width="80px">
              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="手牌号" prop="handBrand">
                    <el-input v-model="fullform.handBrand" placeholder="请输入手牌号" style="width: 100%;"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="房间号" prop="roomNumber">
                    <el-input v-model="fullform.roomNumber" placeholder="请输入房间号"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="房间类型" prop="roomType">
                    <el-select v-model="fullform.roomType" placeholder="请选择房间类型" style="width: 100%;" :disabled="true">
                      <el-option
                        v-for="dict in dict.type.yqg_room_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="房间费用" prop="roomCharges">
                    <el-select v-model="fullform.roomCharges" placeholder="请选择房间费用" style="width: 100%;">
                      <el-option
                        v-for="price in prices"
                        :key="price"
                        :label="price"
                        :value="price"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="开房时间" prop="note1">
                    <el-date-picker clearable
                                    v-model="fullform.note1"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="请选择开房时间"
                                    style="width: 100%;">
                    </el-date-picker>

                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="同住手牌" prop="inmate">
                    <el-input v-model="fullform.inmate" placeholder="请输入同住手牌号" style="width: 100%;">
                      <template slot="append">
                        <el-button @click="handleConfirm(fullform.inmate)">确定</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row justify="space-between">
                <el-col :span="11">
                  <el-form-item label="叫醒时间" prop="checkOutTime">
                    <el-date-picker clearable
                                    v-model="fullform.wakeUp"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="请选择叫醒时间" style="width: 100%;">
                    </el-date-picker>
                  </el-form-item>

                </el-col>
                <el-col :span="11">
                  <el-form-item label="服务员" prop="waiter">
                    <el-input v-model="fullform.waiter" placeholder="请输入服务员" />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm5">确 定</el-button>
              <el-button @click="cancel5">取 消</el-button>
            </div>
          </el-dialog>

        </div>


      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import {
  delMenu,
  getMenu,
  addRoom,
  updateRoom,
  getWake,
  sanitaryRoom,
  listMenu1,
  getRouter,
  listNormal,
  getNumber,
  getUnBack,
  getClean,
  getStatus,
  getJoin,
  leaveRoom,
  bellRoom,
  changeRoom,
}
  from
    "@/api/module/zxm/room";
// import {addRoom, updateRoom} from "@/api/project/room";
export default {
  name: "HorseOrder",
  dicts: ['yqg_room_type','yqg_room_status','yqg_hand_category', 'yqg_hand_state', 'yqg_room_type'],
  data() {
    return {
      menuList: [],
      List:[],
      normalList:[],
      numberList:[],
      latterList:[],
      cleanList:[],
      wakeList:[],
      emptyList:[],
      joinList:[],
      prices: [],
      consumption:null,
      roomNumber:"",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      back:false,
      cleaner:false,
      over:false,
      bell:false,
      full:false,
      // 表单参数
      form: {
        roomNumber:"",
      },
      backform:{
        roomNumber:"",
        roomStatus:"",
      },
      cleanerForm:{
        roomNumber:"",
      },
      bellform:{
      },
      fullform:{
      },
      rules1: {
        roomNumber: [
          { required: true, message: "房间号不能为空", trigger: "blur" }
        ],
      },
      rules2: {

        roomNumber: [
          { required: true, message: "房间号不能为空", trigger: "blur" }
        ],
        handBrand: [
          { required: true, message: "手牌号不能为空", trigger: "blur" },
        ],
        note2: [
          { required: true, message: "退房时间不能为空", trigger: "blur" }
        ],
        whetherLeave:[
          { required: true, message: "同住不能为空", trigger: "blur" }
        ],
      },
      rules: {
        handBrand: [
          { required: true, message: "手牌号不能为空", trigger: "blur" },
        ],
        handCategory: [
          { required: true, message: "手牌类别不能为空", trigger: "blur" }
        ],
        handState: [
          { required: true, message: "手牌状态不能为空", trigger: "blur" }
        ],
        roomNumber: [
          { required: true, message: "房间号不能为空", trigger: "blur" }
        ],
        note1: [
          { required: true, message: "开房时间不能为空", trigger: "blur" }
        ],
        roomCharges: [
          { required: true, message: "房间费用不能为空", trigger: "blur" }
        ],
        roomType: [
          { required: true, message: "房间类型不能为空", trigger: "blur" }
        ],
        waiter:[
          { required: true, message: "服务员不能为空", trigger: "blur" }
        ],
      },
      activeName: 'first',
      formInline: {
        user: '',
        region: ''

      }
    }
  },
  created() {
    this.$root.$on('websocket-message', this.handleWebSocketMessage);
    this.getEmpty();
    this.getAwaken();
    this.getHonest();
    this.getLatter();
    this.getNormal();
  },
  mounted() {
    this.getNormalList();
  },
  watch: {
    activeName:function(val)  { //监听切换状态-计划单
      if (val=='first'|| val==null){
        this.List = undefined;
        this.loading = true;
        listNormal().then(response => {
          this.normalList = response.data;
          this.loading = false;
          // console.log(this.normalList+"233");
        });
      }

      else {
        getMenu(val).then(response => {
          this.List = response.data;
          this.loading = false;
        })};

    },




  },
  methods: {
    //将阿拉伯数字转换成语音大写
    converNumber(roomNumber) {
      const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];

      let result = '';
      let numStr = String(roomNumber);

      for (let i = 0; i < numStr.length; i++) {
        const digitIndex = Number(numStr[i]);
        result += digits[digitIndex];
      }

      return result;
    },

    //查询空闲房间
    getEmpty(){
      getStatus().then(response => {
        this.emptyList = response.data;
      });
    },

    beforeDestroy() {
      // 解绑 websocket-message 事件
      this.$root.$off('websocket-message', this.handleWebSocketMessage);

    },


    //叫醒到时的提醒
    handleWebSocketMessage(data) {
      // 处理接收到的消息
      console.log(data+"我是data");
      // 取消之前的语音播放
      window.speechSynthesis.cancel();
      for (let i = 0; i < 2; i++) {
        const roomNumber = Number(data.msgContent.slice(0, 4));
        const chineseNumber = this.converNumber(roomNumber);
        const distance = data.msgTitle;
        console.log(distance+"woshi")
        if (distance=="0"){
          const message = new SpeechSynthesisUtterance(`房间${chineseNumber}叫醒到时！`);
          window.speechSynthesis.speak(message);
        }
        else if (distance=="1"){
          const message = new SpeechSynthesisUtterance(`房间${chineseNumber}休息到时！`);
          window.speechSynthesis.speak(message);
        }

      }
      this.getLatter()
    },

    //存储同来手牌号
    handleConfirm(inmate){
      var arr = [];

      this.form.inmate = inmate+","
      // if (this.form.inmate.charAt(this.form.inmate.length - 1)==",") {
      //   console.log("hello ")
      //   arr = this.form.inmate.substring(0, this.form.inmate.length- 1).split(",");
      //   this.form.inmate = arr
      // }

    },

    //获取叫醒的房间号
    getAwaken(){
      getWake().then(response => {
        this.wakeList = response.data;
      });
    },
    getRoomColor(status){
      if (status === '0') {
        return 'primary'; // 成功状态的颜色类名
      } else if (status === '1') {
        return 'danger'; // 警告状态的颜色类名
      } else if (status === '2') {
        return 'warning'; // 错误状态的颜色类名
      } else if (status === '3') {
        return 'info'; // 其他状态的颜色类名，可以为空字符串或其他默认颜色类名
      } else if (status === '4') {
        return 'success'; // 其他状态的颜色类名，可以为空字符串或其他默认颜色类名
      }
    },
    handleDialogChange(val) {
      console.log(val+"woshi va")
      if (val) {
        this.handleRoomNumberChange(this.form.roomNumber)
      }
    },
    //开房时候根据房间号变化的
    handleRoomNumberChange(roomNumber){

      clearTimeout(this.inputTimer)
      // 设置一个新的定时器
      this.inputTimer = setTimeout(() => {

        if (roomNumber.length>1){
          getJoin(this.form.roomNumber).then(response => {
            this.joinList = response.data
            this.form.roomType = this.joinList[0].note5
            // 获取当前房间类型对应的费用信息，并按照 unitPrice 排序
            const sortedFees = this.joinList.sort((a, b) => a.unitPrice - b.unitPrice).map(item => item.entryName);

            // 去重
            this.prices = Array.from(new Set(sortedFees));


          })
        }
        else {
          this.joinList = []
          this.prices = []
        }
      }, 1000) // 延迟1000毫秒执行


    },


//加钟时候根据房间号变化的

    // handleRoomNumberChange2(roomNumber){
    //
    //   clearTimeout(this.inputTimer)
    //   // 设置一个新的定时器
    //   this.inputTimer = setTimeout(() => {
    //
    //       if (roomNumber.length>1){
    //         getJoin(roomNumber).then(response => {
    //           this.joinList = response.data
    //           this.bellform.roomType = this.joinList[0].note5
    //           // 获取当前房间类型对应的费用信息，并按照 unitPrice 排序
    //           const sortedFees = this.joinList.sort((a, b) => a.unitPrice - b.unitPrice).map(item => item.entryName);
    //
    //           // 去重
    //           this.prices = Array.from(new Set(sortedFees));
    //
    //
    //         })
    //       }
    //       else {
    //         this.joinList = []
    //         this.prices = []
    //       }
    //     },
    //     100) // 延迟1000毫秒执行
    //
    //
    // },
//换房时候根据房间号变化的
    giveChange(roomNumber){

      clearTimeout(this.inputTimer)
      // 设置一个新的定时器
      this.inputTimer = setTimeout(() => {

          if (roomNumber.length>1){
            getJoin(roomNumber).then(response => {
              this.joinList = response.data
              this.bellform.roomType = this.joinList[0].note5
              this.fullform.roomType = this.joinList[0].note5
              // 获取当前房间类型对应的费用信息，并按照 unitPrice 排序
              const sortedFees = this.joinList.sort((a, b) => a.unitPrice - b.unitPrice).map(item => item.entryName);

              // 去重
              this.prices = Array.from(new Set(sortedFees));


            })
          }
          else {
            this.joinList = []
            this.prices = []
          }
        },
        100) // 延迟1000毫秒执行


    },

    //查询休息到时的e
    getLatter(){

      getUnBack().then(response => {
        this.latterList = response.data;
      });
    },
    //查看清洁的房间号
    getHonest(){
      getClean().then(response => {
        this.cleanList = response.data;
      });
    },
    //获取标准房信息
    getNormal(){
      this.loading = true;
      listNormal().then(response => {
        this.normalList = response.data;
        this.loading = false;
      });
    },
    //留房离开
    getLeave() {
      console.log(this.backform.roomStatus+"woshi");
      this.$modal.confirm('是否确认同住已离开？').then(() => {
        if (!this.backform.roomNumber) {
          this.$message.warning('该房间不是留房');
          return Promise.reject();
        }

        else if (this.backform.roomStatus!=3){
          this.$message.warning('该房间不是留房');
          return Promise.reject();
        }
        return leaveRoom(this.backform.roomNumber);
      }).then(() => {
        this.reset1()
        this.getNormal();
        this.$modal.msgSuccess("同住已离开");
      }).catch(() => {});
    },


    //点击房间获取信息
    getNormalList(item){
      if (!item){
        const number = "8201"
        getNumber(number).then(response => {
          this.numberList = response.data;

        });
      }

      const number = item.roomNumber;
      getNumber(number).then(response => {
        this.numberList = response.data;

        const room = this.numberList[0];

        if (room?.roomStatus=="1"){
          //退房的时候赋值
          this.backform.roomNumber = room.roomNumber;
          this.backform.handBrand  = room.handBrand;
          //给加钟的赋值
          this.bellform.roomNumber = room.roomNumber;
          this.bellform.handBrand = room.handBrand;
          //给换房的赋值
          this.fullform.roomNumber = room.roomNumber;
          this.fullform.handBrand = room.handBrand;
          this.giveChange(room.roomNumber)

        }
        //已退房时候赋值
        else if (room?.roomStatus=="2"){
          this.cleanerForm.roomNumber = room.roomNumber;
        }
        //留房离开赋值
        else if (room?.roomStatus=="3"){
          this.backform.roomNumber = room.roomNumber;
          this.backform.roomStatus = room.roomStatus;
        }
        //洁房完成赋值
        else if (room?.roomStatus=="4"){
          this.cleanerForm.roomNumber = room.roomNumber;
        }

      });

    },

    /** 提交按钮，退房的*/
    submitForm1() {
      this.$refs["backform"].validate(valid => {
        if (valid) {
          updateRoom(this.backform).then(response => {
            this.$modal.msgSuccess("退房成功");
            this.getEmpty();
            this.getLatter()
            listNormal().then(response => {
              this.normalList = response.data;
            });
            getWake().then(response => {
              this.wakeList = response.data;
            });
            getNumber(this.backform.roomNumber).then(response => {
              this.numberList = response.data;
            });
            this.back = false;
            this.reset1();
          });
        }
      });
    },
    /** 提交按钮，开始洁房的*/
    // submitForm2() {
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //       sanitaryRoom(this.form).then(response => {
    //                   listNormal().then(response => {
    //                     this.normalList = response.data;
    //                   });
    //                   this.getHonest();
    //                   this.getEmpty();
    //                   getNumber(this.form.roomNumber).then(response => {
    //                     this.numberList = response.data;
    //                   });
    //                   this.cleaner = false;
    //                   this.$modal.msgSuccess("开始洁房");
    //                 });
    //     }
    //   });
    // },

    /** 提交按钮，开始完成的*/
    submitForm3() {
      this.$refs["cleanerForm"].validate(valid => {
        if (valid) {
          getNumber(this.cleanerForm.roomNumber).then(response => {
            this.numberList = response.data;
            this.numberList = Object.values(response.data);
            this.numberList.forEach(item=>{
              if(item.roomStatus === '2') {
                console.log("hello")// 判断status属性是否为某个值（例如'xxxxx'）
                this.$modal.msgSuccess("开始洁房");
              }
              if(item.roomStatus === '4') {
                this.$modal.msgSuccess("洁房已完成");
              }if(item.roomStatus === '0'||item.roomStatus === '1') {
                this.$modal.msgWarning("当前房间不能洁房");
              }
            })
          });
          setTimeout(() => {
            sanitaryRoom(this.cleanerForm).then(response => {
              listNormal().then(response => {
                this.normalList = response.data;

                // console.log(this.normalList+"233");
              });
              this.getHonest();
              this.getEmpty();
              getNumber(this.cleanerForm.roomNumber).then(response => {
                this.numberList = response.data;
              });
              this.over = false;
              this.reset2();
            });
          }, 500); // 设置0.5秒的延迟
        }
      });
    },
    /** 提交按钮,洁房的 */
    submitForm2() {
      this.$refs["cleanerForm"].validate(valid => {
        if (valid) {
          getNumber(this.cleanerForm.roomNumber).then(response => {
            this.numberList = response.data;
            this.numberList = Object.values(response.data);
            this.numberList.forEach(item=>{
              if(item.roomStatus === '2') {
                console.log("hello")// 判断status属性是否为某个值（例如'xxxxx'）
                this.$modal.msgSuccess("开始洁房");
              }
              if(item.roomStatus === '4') {
                this.$modal.msgSuccess("洁房已完成");
              }if(item.roomStatus === '0'||item.roomStatus === '1') {
                this.$modal.msgWarning("当前房间不能洁房");
              }
            })
          });
          setTimeout(() => {
            sanitaryRoom(this.cleanerForm).then(response => {
              listNormal().then(response => {
                this.normalList = response.data;

                // console.log(this.normalList+"233");
              });
              this.getHonest();
              this.getEmpty();
              getNumber(this.cleanerForm.roomNumber).then(response => {
                this.numberList = response.data;
              });
              this.cleaner = false;
              this.cleanerForm.roomNumber = null
              this.cleanerForm.cleanerNumber = null
            });
          }, 500); // 设置0.5秒的延迟
        }
      });
    },

    /** 提交按钮，开房的*/
    submitForm() {
      this.$refs["form"].validate(valid => {

        if (valid) {
          addRoom(this.form).then(response => {
            this.$modal.msgSuccess("开房成功");
            this.open = false;
            this.getNormal();
            this.getEmpty();
            this.getAwaken();
          });
        }
      });
    },
    /** 提交按钮，加钟的*/
    submitForm4() {
      this.$refs["bellform"].validate(valid => {
        if (valid) {
          bellRoom(this.bellform).then(response => {
            this.$modal.msgSuccess("加钟成功");
            this.bell = false;
            this.getNormal();
            this.getEmpty();
            this.getAwaken();
          });
        }
      });
    },
    /** 提交按钮，换房的的*/
    submitForm5() {
      this.$refs["fullform"].validate(valid => {
        if (valid) {
          changeRoom(this.fullform).then(response => {
            this.$modal.msgSuccess("换房成功");
            this.full = false;
            this.getNormal();
            this.getEmpty();
            this.getAwaken();
            this.reset4();
          });
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancel1() {
      this.back = false;
      this.reset1();
    },
    // 取消按钮
    cancel2() {
      this.cleaner = false;
      this.reset2();
    },
    cancel3() {
      this.over = false;
      this.reset2();
    },
    cancel4() {
      this.bell = false;
      this.reset3();
    },
    cancel5() {
      this.full = false;
      this.reset4();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        roomNumber: null,
        roomType: null,
        roomStatus: null,
        openingHours: null,
        checkOutTime: null,
        roomCharges: null,
        actualTime: null,
        whetherLeave:null,
        chargingTime: null,
        timeRemaining: null,
        cleanerNumber: null,
        wakeUp: null,
        inmate:null,
        waiter: null,
        artificer: null,
        entryName: null,
        note: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    reset3() {
      this.bellform = {
        ID: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        roomNumber: null,
        roomType: null,
        roomStatus: null,
        openingHours: null,
        checkOutTime: null,
        roomCharges: null,
        actualTime: null,
        whetherLeave:null,
        chargingTime: null,
        timeRemaining: null,
        cleanerNumber: null,
        wakeUp: null,
        inmate:null,
        waiter: null,
        artificer: null,
        entryName: null,
        note: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("bellform");
    },
    reset4() {
      this.fullform = {
        ID: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        roomNumber: null,
        roomType: null,
        roomStatus: null,
        openingHours: null,
        checkOutTime: null,
        roomCharges: null,
        actualTime: null,
        whetherLeave:null,
        chargingTime: null,
        timeRemaining: null,
        cleanerNumber: null,
        wakeUp: null,
        inmate:null,
        waiter: null,
        artificer: null,
        entryName: null,
        note: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("fullform");
    },
    reset2() {
      this.cleanerForm = {
        ID: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        roomNumber: null,
        roomType: null,
        roomStatus: null,
        openingHours: null,
        checkOutTime: null,
        roomCharges: null,
        actualTime: null,
        whetherLeave:null,
        chargingTime: null,
        timeRemaining: null,
        cleanerNumber: null,
        wakeUp: null,
        inmate:null,
        waiter: null,
        artificer: null,
        entryName: null,
        note: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("cleanerForm");
    },

    reset1() {
      this.backform = {
        ID: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        roomNumber: null,
        roomType: null,
        roomStatus: null,
        openingHours: null,
        checkOutTime: null,
        roomCharges: null,
        actualTime: null,
        whetherLeave:null,
        chargingTime: null,
        timeRemaining: null,
        cleanerNumber: null,
        wakeUp: null,
        inmate:null,
        waiter: null,
        artificer: null,
        entryName: null,
        note: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("backform");
    },

    /** 开房按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "开房信息";
    },
    //展示退房对话框
    backAdd() {
      this.reset();
      this.back = true;
      this.title = "退房信息";
    },
    //展示清房对话框
    cleanUp() {
      this.reset();
      this.cleaner = true;
      this.title = "洁房信息";
    },
    getOver(){
      this.reset();
      this.over = true;
      this.title = "洁房信息";
    },
    getBell(){
      this.reset();
      this.bell = true;
      this.title = "加钟信息";
    },
    getChange(){
      this.reset();
      this.full = true;
      this.title = "换房信息";
    }
  }
}
</script>

<style>
.button1{
  background-color: #ebd4ef;
  border: #9c26b0;
}
.button1:hover{
  background: #e1d7f0 !important;
}
.head{
  background-color: #FFFFFF;
  color: #333;
  margin-left: 10px;
  margin-right: 10px;
}
.head-icon1{
  float: left;
  margin-top: 0px;
}
.head-biaoqian1{
  text-align: center;
  margin-top: 1px;
  margin-left: 1110px;
}
.world {
  background-color: #E9EEF3;
  color: #333;
  min-width: 600px;
  text-align: center;
  margin-top: 5px;
  height: 765px;
  margin-left: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.house1 {
  background-color: #9c26b0;
  max-width: 600px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.biaoqian {
  height:713px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  overflow-y: auto;
  overflow-x: hidden;
}

.biaoqian::after {
  height: 0;
  border: none;
}

.el-tabs__header {
  border: none !important;
}
.biaozhunpage1{
  overflow-y: auto ;
  overflow-x: hidden;
}

.hello {
  background-color: #E9EEF3;
  color: #333;
  width: 800px;
  height: 765px;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-head1{
  height: 300px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-head-left2{
  height: 325px;
  width: 500px;
  float: left;
  margin-right: 5px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-head-left1{
  height: 300px;
  width: 500px;
  float: left;
  margin-right: 5px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-head-right1{
  height: 300px;
  width: 540px;
  float: right;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-down{
  height: 425px;
  width: 1055px;
  margin-top: 10px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.text-align-center {
  text-align: center;
}
.main-down-table{
  height: 425px;
  width: 1055px;
  margin-top: 10px;
  background-color: #FFFFFF;
  border-radius: 4px;
}
::-webkit-scrollbar{
  width: 0!important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
